<extend name="./public/frame.html"/>
<block name="content">
    <style>
        .layui-form-label {
            width: 10%;
        }

        .layui-input-block {
            margin-left: 12%;
        }
        .layui-unselect.layui-form-checkbox{
            margin-bottom:5px;
        }
    </style>
    <script type="text/javascript" charset="utf-8" src="/public/editor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/lang/zh-cn/zh-cn.js"></script>
    <form class="layui-form layui-form-pane1" id="testForm" method="post" enctype="multipart/form-data">
        <table class="layui-table">
            <tr>
                <td style="text-align: center;">页面是否显示</td>
                <td>
                    <div class="layui-input-inline" style="width: 250px;">
                        <select id="is_show" name="is_show" class="layui-input" lay-filter="is_display"
                                style="width: 500px;">
                            <option value="1">显示</option>
                            <option value="-1">不显示</option>
                        </select>
                    </div>
                </td>
            </tr>

            <tr>
                <td style="text-align: center;">活动协议</td>
                <td>
                    <div class="layui-input-inline" style="width: 250px;">
                        <select id="is_extension" name="is_extension" class="layui-input" lay-filter="is_display"
                                style="width: 500px;">
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </td>
            </tr>

            <tr>
                <td style="text-align: center;width: 10%">活动名称</td>
                <td><input type="text" name="title" id="title" lay-verify="required" placeholder="活动名称"
                           class="layui-input" style="width: 500px;"></td>
            </tr>
            <tr>
                <td style="text-align: center;">活动banner</td>
                <td>
                    <img id="pic_url" layer-src="" src="" width="100px;" height="100px;" style="display: none;">&nbsp;&nbsp;<button
                        type="button" class="layui-btn uploads" id="upload-CarBrand}">上传图片
                </button>
                    <input name="img" id="activity_img" type="hidden" value="">
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">排序</td>
                <td>
                    <input name="order" id="order" type="text" value="" class="layui-input">
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">活动Url</td>
                <td><input type="text" name="url" id="url" lay-verify="required"
                           placeholder="请填写https://或http://开头的URL地址" class="layui-input" style="width: 500px;"></td>
            </tr>
            <tr>
                <td style="text-align: center;">预生产Url</td>
                <td><input type="text" name="pro_url" id="pro_url" lay-verify="required"
                           placeholder="请填写https://或http://开头的URL地址" class="layui-input" style="width: 500px;"></td>
            </tr>
            <tr>
                <td style="text-align: center;">活动时间</td>
                <td>
                    <input type="text" name="start_time" id="start_time" lay-verify="required" placeholder="活动开始时间"
                           class="layui-input" style="width: 150px;float: left;margin-right: 10px;"><span
                        style="float: left;margin-right: 10px;padding-top: 5px;">-</span>
                    <input type="text" name="end_time" id="end_time" lay-verify="required" placeholder="活动结束时间"
                           class="layui-input" style="width: 150px;float: left;">
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">区域选择</td>
                <td>
                    <div class="layui-input-inline" style="width: 250px;">
                        <select name="cs_type" class="select class-select" lay-filter="cs_type" id="cs_type">
                            <option value="0">全国</option>
                            <option value="1">选择省市</option>
                        </select>
                    </div>
                </td>
            </tr>
            <div class="layui-form-item inputModel">
                <table class="layui-table">
                    <tr class="province01" style="display: none;width: 100px">
                        <td>省级区域</td>
                        <td>
                            <input type="checkbox" value="all" title="全部" class="province_all pro zdy"
                                   lay-filter="province">
                            <volist name="provinces" id="province">
                                <input type="checkbox" name="region[2][]" title="{$province}" value="{$key}"
                                       class="lay-input province_child province pro zdy" lay-filter="province">
                            </volist>

                        </td>
                    </tr>


                    <tr class="city01" style="display: none">
                        <td>市级区域</td>
                        <td>
                            <ul id="city">
                                <volist name="edit_provinces" id="edit_pro">
                                    <php>$pid = $key; $class = 'city_'.$pid;</php>
                                    <li class="{$class} region_li">
                                        <input type="checkbox" value="all" data-pid="{$pid}" title="{$edit_pro}"
                                               class="lay-input city_all_{$pid}" lay-filter="city">
                                        <volist name="$edit_citys[$pid]" id="city">
                                            <input type="checkbox" name="region[3][{$pid}][]" data-pid="{$pid}"
                                                   title="{$city}" value="{$key}"
                                                   class="lay-input city_child_{$pid} city">
                                        </volist>
                                    </li>
                                </volist>
                            </ul>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: center;width: 100px">活动描述</td>
                        <td>
                    <textarea placeholder="请输入活动描述" class="layui-textarea" name="description" lay-verify="required"
                              style="width: 500px;"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="padding-left: 100px;">
                            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                        </td>
                    </tr>
                </table>
            </div>
        </table>
    </form>
    <script>
        layui.use(['form', 'upload', 'laydate'], function () {
            form = layui.form, upload = layui.upload;
            level = 3, pro_tmp = [], cit_tmp = [], cou_tmp = [];
            $('.province').each(function () {
                if ($(this).prop('checked')) {
                    pro_tmp.push($(this).val());
                }
            });
            $('.city').each(function () {
                if ($(this).prop('checked')) {
                    cit_tmp.push($(this).val());
                }
            });
            var laydate = layui.laydate;
            laydate.render({
                elem: '#start_time'
                , min: '<?php echo date("Y-m-d",strtotime("+1 day"));?>'
            });
            laydate.render({
                elem: '#end_time'
                , min: '<?php echo date("Y-m-d",strtotime("+1 day"));?>'
            });
            laydate.render({
                elem: '#date_time'
                , min: '<?php echo date("Y-m-d",strtotime("+1 day"));?>'
            });
            laydate.render({
                elem: '.LAY_demorange_s',
                type: 'time',
                format: 'H:mm'
            });
            laydate.render({
                elem: '.LAY_demorange_e',
                type: 'time',
                format: 'H:mm'
            });
            laydate.render({
                elem: '.LAY_demorange_start',
                type: 'time',
                format: 'H:mm'
            });
            laydate.render({
                elem: '.LAY_demorange_end',
                type: 'time',
                format: 'H:mm'
            });
            upload.render({
                elem: '.uploads'//这个就等同于点击
                , url: '/admin/Upload/uploadImg'
                , done: function (res) { //上传后的回调
                    console.log(res)
                    if (res.status == 1) {
                        $("#pic_url").css('display', '');
                        $("#pic_url").attr('src', res.data.file); //点击后的大图
                        $("#pic_url").attr('layer-src', res.data.file_thumb); //小图
                        $("#activity_img").val(res.data.file); //点击后的大图
                        layer.msg('上传成功', {icon: 1});
                    } else {
                        layer.msg(res.msg);
                    }
                }
                , error: function (e) {
                    console.log(e)
                }
            });
            form.on('select(cs_type)', function (data) {
                if (data.value == 1) {
                    $('.province01').show();
                    $('.city01').show();
                } else {
                    $('.province01').css('display', 'none');
                    $('.city01').css('display', 'none');
                }

            });
            form.on('submit(*)', function (data) {
                //活动时间比较
                var start_time = $("#start_time").val();
                var end_time = $("#end_time").val();
                if (start_time > end_time) {
                    layer.msg('活动开始时间不能大于结束时间', {icon: 5});
                    return false
                }
                var user_type = $("#user_type").val();
                var activity_model = $("#activity_model").val();
                if (user_type == 2) {
                    if (activity_model == 7 || activity_model == 8) {
                        var start_time_interval = $("#start_time_interval").val();
                        var end_time_interval = $("#end_time_interval").val();
                        var st = start_time_interval.split(':');
                        var et = end_time_interval.split(':');
                        if ((st[0] + st[1]) * 1 > (et[0] + et[1]) * 1) {
                            layer.msg('活动时间段时间不能大于结束时间', {icon: 5});
                            return false
                        }
                    } else if (activity_model == 2) {
                        var order_start_time_interval = $("#order_start_time_interval").val();
                        var order_end_time_interval = $("#order_end_time_interval").val();
                        var st = order_start_time_interval.split(':');
                        var et = order_end_time_interval.split(':');
                        if ((st[0] + st[1]) * 1 > (et[0] + et[1]) * 1) {
                            layer.msg('活动时间段时间不能大于结束时间', {icon: 5});
                            return false
                        }
                    }
                }
                var activity_img = $("#activity_img").val();
                var activity_url = $("#url").val();
                var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
                if (!reg.test(activity_url)) {
                    layer.msg('请输入正确网址链接', {icon: 5});
                    return false
                }
            });
            form.on('checkbox(city)', function (data) {
                var elem = data.elem, value = data.value, check = elem.checked,
                    all = $('.city_all_' + $(elem).data('pid')),
                    item = $('._child_' + $(elem).data('pid')), index = 0, flag = false, cit = [];
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = cit_tmp.indexOf($(this).val());
                            if (ind == -1) {
                                cit.push($(this).val());
                                cit_tmp.push($(this).val());
                            }
                        });
                        if (!check) {
                            cit = [];
                            cit_tmp = [];
                            $('#county').html('');
                            $('#county_').hide();
                        }
                        form.render('checkbox');
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        if (!check) {
                            var ind = cit_tmp.indexOf(value);
                            if (ind > -1) {
                                cit_tmp.splice(ind, 1);
                            }

                        } else {
                            cit = [];
                            cit.push(value);
                            cit_tmp.push(value);
                        }
                        all.prop({'checked': flag});
                        form.render('checkbox');
                }

            });

            form.on('checkbox(province)', function (data) {

                $('.city01').show();
                var elem = data.elem, value = data.value, check = elem.checked, all = $('.province_all'),
                    item = $('.province_child'), index = 0, flag = false, pro = [];
                console.log(check)
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = pro_tmp.indexOf($(this).val());
                            if (ind == -1) {
                                pro.push($(this).val());
                                pro_tmp.push($(this).val());
                            }
                        });
                        if (!check) {
                            pro = [];
                            pro_tmp = [];
                            $('#city').html('');
                            $('#county').html('');
                            $('#city_').hide();
                            $('#county_').hide();
                        }
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        all.prop({'checked': flag});
                        if (!check) {
                            var ind = pro_tmp.indexOf(value);
                            if (ind > -1) {
                                pro_tmp.splice(ind, 1);
                            }
                            console.log(value)
                            $('._' + value).remove();
                            if ($('#city').children('li').length == 0) {
                                $('#city_').hide();
                            }
                            if ($('#county').children('li').length == 0) {
                                $('#county_').hide();
                            }
                        } else {
                            pro = [];
                            pro.push(value);
                            pro_tmp.push(value);
                        }
                        break;
                }
                form.render('checkbox');
                if (pro.length > 0 && level > 2) {
                    ajax(form, layer, pro, 2, 'city');
                }
            });


        });

        //验证只能输入数字
        function num(object) {
            var value = object.value;
            var id = object.id;
            if (isNaN(value)) {
                layer.msg('请输入正确的数字', {icon: 5});
                $("#" + id).val('');
                return false;
            }
        }


        function ajax(form, layer, pid, level, id) {
            $.post('{$url}', {pid: pid.join(','), level: level}, function (res) {
                switch (res['status']) {
                    case 1:
                        $('#' + id).append(res['html']);
                        form.render('checkbox');
                        $('#' + id + '_').show();
                        break;
                    default:
                        layer.alert(res['msg'], {icon: 5});
                        break;
                }
            }, 'json')
        }


        //订单奖励 减少
        function reduceInsidePrice($this) {
            $($this).parent().parent().remove();
        }
    </script>
    <script type="text/javascript">
        var ue = UE.getEditor('editor', {
            zIndex: 0,// z轴
        });
    </script>
</block>
